<template>
  <div :class="className"
       :style="{height:height,width:width}" />
</template>

<script>
import * as echarts from "echarts"
export default {
  name: 'OneHistogram',
  props: {
    className: {
      type: String,
      default:
        'chart'
    },
    width: {
      type: String,
      default:
        '100%'
    },
    height: {
      type: String,
      default:
        '350px'
    },
    chartData: {
      type: Array,
      required: true
    },
    chartTime: {
      type: Array,
      required: true
    },
    interval: {
      type: Number,
      required: true
    },
    name: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(
          this.headTitle,
          this.chartData,
          this.chartTime,
          this.interval,
          this.name
        )
      }
    }
  },
  mounted() {
    window.addEventListener('resize', this.resizeHandler)
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeHandler)
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    resizeHandler() {
      this.chart.resize();
    },
    initChart() {
      this.chart = echarts.init(this.$el);
      this.setOptions(this.headTitle,
        this.chartData,
        this.chartTime,
        this.interval,
        this.name)
    },
    setOptions(title, chartData, chartTime, interval, name) {
      this.chart.setOption({
        color: ['#1890FF'],
        title: {
          text: '设备在线率',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: [name],
          top: 'bottom'
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            // prettier-ignore
            data: chartTime,
            axisTick: {
              alignWithLabel: true
            },
            axisPointer: {
              label: {
                fontSize: '12px'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            boundaryGap: false,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            min: 0,
            max: 100,
            interval: 20
          }
        ],
        series: [
          {
            name: name,
            type: 'bar',
            data: chartData,
            barGap: '0%',
            barWidth: 20,
            label: {
              position: 'top',
              show: true,
              color: '#000'
            }
          },
          {
            name: "",
            type: "pictorialBar",
            symbolSize: [20, 10],//调整截面形状
            symbolOffset: [0, 5],
            z: 12,
            symbolPosition: "end",
            "itemStyle": {
              'normal': {
                color: function (params) {
                  var colorArr = ['#C1232B', '#B5C334',
                    '#FCCE10', '#E87C25', '#27727B',
                    '#FE8463', '#9BCA63'];
                  return colorArr[params.dataIndex]
                },
              }
            },
            data: chartData
          }
        ]
      })
    }
  }
}
</script>

<style scoped>
</style>
